<template>
	<view>
		<Header title="每日限购" :showBack="true"></Header>
		<view class="container">
			<!-- 头像，名称，班级，学校 -->
			<view class="user-avatar-school">
				<view class="avatar-box">
					<image src="../../static/userCode.png" class="avatar"></image>
				</view>
				<view class="school-name">
					<view class="name"><text>{{info.ownerName}}</text></view>
					<view class="school">{{info.organizationName}}</view>
					<view class="school">{{info.gradeName}}</view>
					<view style="font-size: 26upx;" v-if="info.cardNo">卡号：{{info.cardNo}}</view>
				</view>
			</view>
			<!-- 牛奶限购 -->
			<view class="box">
				<view class="title-btn">
					<view class="title">牛奶限购</view>
					<view class="btn" @click="summitMilk">保存</view>
				</view>
				<view class="switch-box">
					<view class="title">限购次数：</view>
					<view class="switch">
						<switch @change="switchChange" color="#ff9200 " style="transform:scale(0.7)" :checked="limitCount==-1"/>
						<view class="switch-status">禁用</view>
					</view>
				</view>
				<view class="choose-box">
					<radio-group @change="checkMilk" style="display: flex;justify-content: space-between; flex-wrap: wrap;">
						<label v-for="(item,index) in milkList" style="font-size: 30upx;width: 50%;display: flex;align-items: center;justify-content: center;" :key="index" v-if="item.value!=-1">
							<radio style="transform: scale(0.6);" color="#ff9200 " :checked="item.value==limitCount" :value="item.value" /><text>{{item.text}}</text>
						</label>
					</radio-group>
				</view>
				<view class="last pa-bottom" v-if="info.pageTags&&info.pageTags.includes('单笔限额')">
					<view>单笔限额:</view>
					<view style="font-size: 28rpx;">
						<input style='width: 100%;text-align: right;padding-right: 10upx;' type="digit" v-model="limitPrice" @input='onInput' placeholder="请输入限额，0元不限" />(元)
					</view>
				</view>
				<view class="attentions" v-if="info.pageTags&&info.pageTags.includes('单笔限额')">*0元为不限制单笔消费额度</view>
			</view>
			
			<!-- 面包房限购 -->
			<!-- info.wxOrganizationId=='O0092B835Z20220803171735316a81' -->
			<view class="box" style="margin-top: 52upx;" v-if="info.pageTags&&info.pageTags.includes('其他限购')&&info.organizationTags &&info.organizationTags!='默认'">
				<view class="title-btn">
					<view class="title">其他限购（{{info.organizationTags}}）</view>
					<view class="btn" @click="summitOther">保存</view>
				</view>
				<view class="switch-box">
					<view class="title">限购次数：</view>
					<view class="switch">
						<switch @change="switchChangeOther" color="#ff9200 " style="transform:scale(0.7)" :checked="limitCount1==-1"/>
						<view class="switch-status">禁用</view>
					</view>
				</view>
				<view class="choose-box">
					<radio-group @change="checkOther" style="display: flex;justify-content: space-between; flex-wrap: wrap;">
						<label v-for="(item,index) in otherList" style="font-size: 30upx;width: 50%;display: flex;align-items: center;justify-content: center;" :key="index" v-if="item.value!=-1">
							<radio style="transform: scale(0.6);" color="#ff9200 " :checked="item.value==limitCount1" :value="item.value" /><text>{{item.text}}</text>
						</label>
					</radio-group>
				</view>
				<view class="last pa-bottom" v-if="info.pageTags&&info.pageTags.includes('单笔限额')">
					<view>面包房限额:</view>
					<view style="font-size: 28rpx;">
						<input style='width: 100%;text-align: right;padding-right: 10upx;' type="digit" v-model="limitPrice1" @input='onInput1' placeholder="请输入限额，0元不限" />(元)
					</view>
				</view>
				<view class="attentions" v-if="info.pageTags&&info.pageTags.includes('单笔限额')">*注：此处是面包房的单笔限额，0为不限制</view>
			</view>
			
			<view class="box" style="margin-top: 52upx;" v-if="info.pageTags&&info.pageTags.includes('商品品类')">
				<view class="title-btn">
					<view class="title">商品类型</view>
					<view class="btn" @click="summitScope">保存</view>
				</view>
				<view class="choose-box">
					<checkbox-group @change="checkScope" style="display: flex;justify-content: space-between">
						<label v-for="(item,index) in scopeList" style="font-size: 26upx;width: 50%;display: flex;align-items: center;" :key="index" v-if="item.value!=-1">
							<!-- <radio style="transform: scale(0.6);" color="#ff9200 " :checked="item.value==limitCount1" :value="item.value" /><text>{{item.text}}</text> -->
							<checkbox class="checkbox" style="transform: scale(0.6);" :checked="item.checked" :value="item.value" /><text>{{item.value}}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="attentions" v-if="info.pageTags&&info.pageTags.includes('单笔限额')">*注：不选择的情况下，默认为不限制。</view>
			</view>
				
			
			
		</view>
		<!-- <view v-if="info.modeFlag?info.modeFlag==1:info.dataTypeFlag==2" class="faceInfo">
		</view>
		<view v-if="info.modeFlag?info.modeFlag==2:info.dataTypeFlag==1" class="info">
			<view>
				<view>IC卡号：{{info.cardNo||'无'}}</view>
				<view>余&#12288;额：{{info.amount||'无'}}</view>
				<view>姓&#12288;名：{{info.ownerName||'无'}}</view>
				<view>状&#12288;态：{{info.statusFlagName||'无'}}</view>
			</view>
		</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNum:uni.getStorageSync('cardNo'),
				info:uni.getStorageSync('info'),
				limitCount:'',
				limitCount1:'',
				limitPrice: 0,
				limitPrice1: 0,
				milkList:[
					{
						value:1,
						text:'每天1次'
					},
					{
						value:2,
						text:'每天2次'
					},
					{
						value:3,
						text:'每天3次'
					},
					{
						value:5,
						text:'每天5次'
					},
					
					{
						value:-1,
						text:'禁用'
					}
				],
				otherList:[
					{
						value:1,
						text:'每天1次'
					},
					{
						value:2,
						text:'每天2次'
					},
					{
						value:3,
						text:'每天3次'
					},
					{
						value:5,
						text:'每天5次'
					},
					
					{
						value:-1,
						text:'禁用'
					}
				],
				scopeList:[
					{value: '纯牛奶'},
					{value: '酸奶'},
					{value: '水'},
					{value: '其他'},
				],
				
				buyTags: '',
			}
		},
		onLoad(e) {
			if(e.isLock){
				this.limitCount = -1
			}else{
				this.limitCount = this.info.limitCount;
				this.limitCount1 = this.info.limitCount1;
				this.limitPrice = this.info.limitPrice;
				this.limitPrice1 = this.info.limitPrice1;
				if(this.info.buyTags&&this.info.buyTags.length){
					var items = this.scopeList,
						values = this.info.buyTags;
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						if(values.includes(item.value)){
							this.$set(item,'checked',true)
						}else{
							this.$set(item,'checked',false)
						}
					}
				}
			}
		},
		onShow() {
			if(this.info.gradeName == '教职工'){
				this.milkList.push({value:0,text:'不限购买'})
			}
		},
		methods: {
			switchChange(e){
				if(e.detail.value){
					this.limitCount = -1
				}else{
					this.limitCount = 2
				}
				this.summitMilk()
			},
			switchChangeOther(e){
				if(e.detail.value){
					this.limitCount1 = -1
				}else{
					this.limitCount1 = 2
				}
				this.summitOther()
			},
			checkMilk(e){
				this.limitCount=e.detail.value
			},
			checkOther(e){
				this.limitCount1=e.detail.value
			},
			checkScope(e){
				var items = this.scopeList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i];
					if(values.includes(item.value)){
						this.$set(item,'checked')
					}else{
						this.$set(item,'checked',false)
					}
				}
				this.buyTags = '';
				this.scopeList.map(item=>{
					if(item.checked) this.buyTags= this.buyTags + ',' + item.value
				})
				if(this.buyTags.length>0){
					this.buyTags = this.buyTags.substr(1, this.buyTags.length - 1);
				}
			},
			onInput(e){
				this.limitPrice = this.pointNum(e.detail.value)
			},
			onInput1(e){
				this.limitPrice1 = this.pointNum(e.detail.value)
			},
			pointNum(obj){
				
				 obj = obj.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
				        obj = obj.replace(/^\./g, ""); //验证第一个字符是数字
				        obj = obj.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
				        obj = obj.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				        obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				        if (obj.indexOf(".") < 0 && obj != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
				            obj = parseFloat(obj);
				        }
				        if (!obj || obj == '0' || obj == '0.0' || obj == '0.00') {
				            return;
				        }
				        return obj;
			},
			summitScope(){
				let data = {
					id: this.info.id,
					buyTags: this.buyTags
				}
				this.$http('/common/api/k12/setBuyTags',data,res=>{
					if(res.data.value==true){
						uni.showToast({
							icon:'none',
							title:'操作成功'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},1200)
					}
				})
				
			},
			summitMilk(){
				let data = {
					id: this.info.id,
					limitCount: this.limitCount,
					limitPrice: Number(this.limitPrice),
				}
				if(!data.limitPrice) data.limitPrice = 0;
				this.$http('/common/api/k12/setLimitCount',data,res=>{
					if(res.data.value==true){
						uni.showToast({
							icon:'none',
							title:'操作成功'
						})
						
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index?type='+this.info.dataTypeFlag
							})
						},1200)
						
					}
					
				})
			},
			summitOther(){
				let data1 = {
					id: this.info.id,
					limitCount1: this.limitCount1,
					limitPrice1: Number(this.limitPrice1),
				}
				if(data1.limitCount1==0 || data1.limitCount1==null){
					return uni.showToast({
						icon: 'none',
						title: '请选择限购次数'
					})
				}
				if(!data1.limitPrice1) data1.limitPrice1 = 0;
				this.$http('/common/api/k12/setLimitCount1',data1,res=>{
					if(res.data.value==true){
						uni.showToast({
							icon:'none',
							title:'操作成功'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index?type='+this.info.dataTypeFlag
							})
						},1200)
					}
					
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container{
		margin: 30upx 34upx;
		border-radius: 16upx;
		padding: 20upx;
		background: rgba(255, 255, 255, 0.3);
	}
	
	.user-avatar-school{
		padding: 30upx 20upx 60upx;
		display: flex;
		.avatar-box{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			padding: 10upx;
			background: #fff;
			margin-right: 36upx;
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.school-name{
			view{margin-top: 16upx;}
			.name{ font-size: 24upx; text{font-size: 32upx;}}
			.school{ font-size: 26upx; width: 456upx; }
		}
	}
	
	.box{
		padding: 0 24upx 32upx 12upx;
		background-color: #FFFFFF;
		margin: 0 auto;
		padding-bottom: 25upx;
		border-radius: 16upx;
		box-shadow: 5upx 15upx 15upx #e7e6e6;
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		.title-btn{
			height: 105upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ccc;
			margin-left: 12upx;
			.title{
				font-size: 32upx;
				color: #333;
			}
			.btn{
				width: 110upx;
				height: 48upx;
				text-align: center;
				line-height: 48upx;
				background: #ff9200 ;
				border-radius: 4upx;
				font-size: 26upx;
				color: #fff;
			}
		}
		
		.switch-box{
			height: 88upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			margin-left: 12upx;
			.switch{
				display: flex;
				align-items: center;
			}
		}
		.last{
			display: flex;
			align-items: center;
			margin: 32upx 0 0 12upx;
			height: 70upx;
			>view:first-child{
				width: 30%;
				font-size: 30upx;
			}
			>view:last-child{
				width: 70%;
				display: flex;
				align-items: center;
				font-size: 30upx;
				border-radius: 4upx;
				background: #f7f7f7;
				height: 60upx;
				padding-right: 10upx;
				}
		}
		.attentions{
			font-size: 28rpx;
			height: 74rpx;
			line-height: 74rpx;
			width: 93%;
			margin: 0 auto;
			color: #aaa;
		}
		.choose-box{
			margin-top: 24upx;
			text{ font-size: 30upx; }
		}
		
	}
	
</style>

<style>
	.checkbox .wx-checkbox-input {
	  border-radius: 50%; /* 圆角 */
	  width: 50rpx; /* 背景的宽 */
	  height: 50rpx; /* 背景的高 */
	}
	.checkbox .wx-checkbox-input-disabled {
	  border-radius: 50%; /* 圆角 */
	  width: 50rpx; /* 背景的宽 */
	  height: 50rpx; /* 背景的高 */
	  background: #ff9200 ;
	}
	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  background: #ff9200 ;
	}
	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	  width: 32rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  text-align: center;
	  font-size: 24rpx;
	  color: #fff;
	  background: transparent;
	  transform: translate(-50%, -50%) scale(1);
	  -webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>
